<html>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
	<title>根据页码切换的选项卡</title>
	<script tyoe="text/javascript" src="../jquery-2.1.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			float: left;
			list-style: none;
			width: 80px;
			height: 50px;
			line-height: 50px;
			border: 2px solid red;
			text-align: center;
		}
		div{
			display: inline-block;
			cursor: pointer;
		}
		.changeBtn{
			float: left;
			height: 50px;
			line-height: 50px;
			width: 20px;
			background-color: green;
		}
		.title{
			float: left;
			/*background-color: pink;*/
			width:505px; 
			overflow:hidden; 
		}
		.title ul{
			width:1300px;
			overflow: hidden;
		}
	</style>
	<body>
		<div class="changeBtn" id="leftBtn"><strong><<</strong></div>
		<div class="title">
		<ul>
			<li>选项一</li>
			<li>选项二</li>
			<li>选项三</li>
			<li>选项四</li>
			<li>选项五</li>
			<li>选项六</li>
			<li>选项七</li>
			<li>选项八</li>
			<li>选项九</li>
			<li>选项十</li>
			<li>选项十一</li>
			<li>选项十二</li>
			<li>选项十三</li>
			<li>选项十四</li>
			<li>选项十五</li>
		</ul>
	</div>
	<div class="changeBtn" id="rightBtn"><strong>>></strong></div>
	</body>
</html>

<script>
	$(function(){
		var i = 6;
		var len = $(".title li").length;
		var maxPage = Math.ceil(len/i);
		alert(maxPage);
	})
		
</script>